<form class="layui-form" lay-filter="module-form" onsubmit="return false;">
    <input type="hidden" name="id" value="#(bean.id??)">
    <input type="hidden" name="deptIds">
    <div class="layui-card">
        <div class="layui-card-body">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-radio"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">基本信息</h3>
                        <p>
					        <div class="layui-form-item layui-inline">
					            <label class="layui-form-label required">角色名称</label>
					            <div class="layui-input-inline">
					                <input type="text" name="name" value="#(bean.name??)" lay-verify="required" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
					            </div>
					            <label class="layui-form-label required">状态</label>
					            <div class="layui-input-inline">
					                <input type="radio" name="status" value="ON" title="启用" #if(bean.status?? == 'ON' || bean.status?? == null) checked #end>
					                <input type="radio" name="status" value="OFF" title="禁用" #if(bean.status?? == 'OFF') checked #end>
					            </div>
					        </div>
					        <div class="layui-form-item layui-inline">
					            <label class="layui-form-label required">权限字串</label>
					            <div class="layui-input-inline">
					                <input type="text" name="code" value="#(bean.code??)" autocomplete="off" placeholder="用于角色校验的字串" class="layui-input">
					            </div>
					            <label class="layui-form-label required">排序</label>
					            <div class="layui-input-inline">
					                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" placeholder="小到大排列" class="layui-input" value="#(bean.sort??)">
					            </div>
					        </div>
					        <div class="layui-form-item layui-block">
					            <label class="layui-form-label">备注</label>
					            <div class="layui-input-block">
					                <textarea name="remark" autocomplete="off" placeholder="请输入备注内容" class="layui-textarea">#(bean.remark??)</textarea>
					            </div>
					        </div>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item#if(bean.id??) layui-hide#end">
                    <i class="layui-icon layui-timeline-axis layui-icon-radio"></i>
                    <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">其它信息</h3>
                        <p>
					        <div class="layui-form-item">
					            <label class="layui-form-label required">数据范围</label>
					            <div class="layui-input-inline">
					                <select name="dataScope" lay-verify="required" lay-filter="bean-dataScope">
					                    <option value="">-- 请选择 --</option>
					                #DICTS(type="role_data_scope")#for(item : dicts)
					                    <option value="#(item.value)"#if(item.value == bean.dataScope??) selected#end>#(item.label)</option>
					                #end#end
					                </select>
					            </div>
					            <div class="layui-form-mid layui-word-aux"><i class="layui-icon layui-icon-about"></i>&nbsp;特殊情况下，设置为“自定数据权限”</div>
					        </div>
					        <div id="bean-table-div"#if(bean.dataScope?? != 'CUSTOM') style="display: none;"#end>
					        	<div id="beans-tree"></div>
					        </div>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
	    <div class="layui-form-item" style="display: none;">
	        <div class="layui-input-block">
	            <button type="submit" onclick="window.getCheckedData();" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="data-save" id="data-save">
	                <i class="layui-icon layui-icon-ok"></i> 提交
	            </button>
	        </div>
	    </div>
    </div>
</form>
#include("/admin/_common/foot.html")

<script src="#CTX()/admin/js/tree.js?_v=#VERSION()"></script>

<script type="text/javascript">
layui.use(['jquery', 'form', 'common', 'table', 'treetable'], function() {
    var $ = layui.jquery, form = layui.form, common = layui.common, tree = layui.tree;
    var treeId = "beans-tree-1";
    
    var MODULE_PATH = "#CTX()/admin/system/dept/";
    
    /*
     * 从后台获取树的完整数据
     */
    window.getTreeData = () => {
        var data = [];
        
        $.ajax({
            url: MODULE_PATH + "tree",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });
        
        return data;
    };

    /*
     * 从后台获取树中被选择的数据
     */
    window.querySelectedIds = () => {
    	var data = [];
    	
        $.ajax({
            url: MODULE_PATH + "queryByRole?roleId=#(bean.id??)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                for (var i = 0; i < result.length; i++){
                	data.push(result[i].id)
                }
            }
        });
        
        return data;
    };

    /*
     * 获取树中当前被选择的数据，存放到表单的指定input中
     */
    window.getCheckedData = () => {
        $("[name='deptIds']").val(window.tree.getCheckedIds(treeId).join());
    };
    
    form.on('select(bean-dataScope)', function(data){
    	if (data.value=='CUSTOM'){
    		$("#bean-table-div").show();
    	} else {
    		$("#bean-table-div").hide();
    	}
    });
    
    /*
     * 渲染树
     */
    window.renderTree = () => {
        var data = window.getTreeData();
        
        tree.render({
            elem: '#beans-tree',
            id: treeId,
            data: data,
            method: "get",
            showCheckbox: true,  // 是否显示复选框
            accordion: true
        });
        
        if("#(bean.id??)" == ""){
        	// 新记录不处理下面的操作
            return;
        }
        
        window.tree.selectChecked(treeId, data, window.getCheckedIds());
    };

    /*
     * 页面加载完成时加载树控件数据
     */
    $(document).ready(() => {
        window.renderTree();
    });
    
});
</script>
